<template>
  <div>
    <table>
      <tr>
        <td rowspan="3" colspan="2" width="100">
          <el-image
            :src="require('@/assets/img/workimg.jpg')"
            style="width: 150px; height: 150px"
            class="headerImg"
          ></el-image>
        </td>
        <td colspan="2">
          <el-card shadow="never">
            <div class="workerId orderItem">
              <span>工号：</span>
              <span>{{ workerInfo.workId }}</span>
            </div>
          </el-card>
        </td>
      </tr>
      <tr>
        <td>
          <el-card shadow="never">
            <div class="name orderItem">
              <span>名字：</span>
              <span>{{ workerInfo.name }}</span>
            </div>
          </el-card>
        </td>
        <td>
          <el-card shadow="never">
            <div class="name orderItem">
              <span>性别：</span>
              <span>{{ workerInfo.gender }}</span>
            </div>
          </el-card>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <el-card shadow="never">
            <div class="joinTime orderItem">
              <span>加入时间：</span>
              <span>{{ workerInfo.joinDate }}</span>
            </div>
          </el-card>
        </td>
      </tr>
    </table>
    <div class="phone orderItem2">
      <span>电话：</span>
      <span>{{ workerInfo.phone }}</span>
    </div>

    <div class="details">
      <div class="showregion" @click="showmore">
        <span class="showstyle">{{
          showregion ? '收起个人描述' : '展开个人描述'
        }}</span>
      </div>

      <div v-show="showregion" class="detailsText">
        {{ workerInfo.details }}
      </div>
    </div>
    <el-card shadow="never">
      <v-chart :options="pie" style="width: 100%; height: 300px" />
    </el-card>
    <br />
    <div class="orderItem avgGrade">
      <span>平均评分</span>
      <el-rate
        v-model="workerInfo.avgGrade"
        show-text
        disabled
        text-color="#ff9900"
      ></el-rate>
    </div>
    <el-button
      type="primary"
      icon="el-icon-caret-left"
      circle
      class="back"
      @click="goBack()"
    ></el-button>
    <el-card class='box-card'  shadow="never">
      <div class='orderItem'>
        <span>本月订单详情</span>
        <el-table :data='workerInfo.thisMonth' height='250' border style='width: 100%'>
          <el-table-column prop='date' label='日期' :show-overflow-tooltip='true'></el-table-column>
          <el-table-column label='评分' :show-overflow-tooltip='true'>
            <template slot-scope='scope'>
              <el-rate v-model='scope.row.grade' disabled></el-rate>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts'

export default {
  components: {
    'v-chart': ECharts
  },
  created() {
    const item = this.$route.params.item

    // 如果没有参数则返回跳转
    if (item == null || !item || item === undefined) {
      this.goBack()
      return
    }

    this.workerInfo = item.data
    // 处理下时间格式 计算一下分数（除 2）
    for (const item of this.workerInfo.thisMonth) {
      item.date = this.getLocalTime(item.date)
      item.grade = item.grade / 2
    }

    this.workerInfo.avgGrade = this.workerInfo.avgGrade / 2
    this.workerInfo.joinDate = this.getLocalTime(this.workerInfo.joinDate)
    this.workerInfo.joinDate = this.workerInfo.joinDate.split(' ')[0]

    this.drawPie()
  },
  data() {
    return {
      showregion: true,
      pie: {},
      bar: {},
      workerInfo: {
        avgGrade: 0,
        details: '',
        gender: '',
        joinDate: '',
        name: '',
        ordersNumber: 0,
        ordersNumberToday: 0,
        phone: '',
        workId: '',
        thisMonth: [
          {
            date: '',
            grade: 3
          }
        ],
        type: []
      },
      nice: 0,
      general: 0,
      bad: 0
    }
  },
  methods: {
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    },
    goBack() {
      this.$router.push({
        // 跳转到上一次的页面
        // this.$router.go(-1)

        // 指定跳转的地址
        // this.$router.replace('/learn')

        // 指定跳转路由的名字下
        // this.$router.replace({name:'menuLink'})

        // 返回跳转过来的父级路由
        path: this.$router.go(-1)
      })
    },
    showmore() {
      this.showregion = !this.showregion
    },
    drawPie() {
      // 遍历下数组查看各种状态的数量
      for (const i of this.workerInfo.thisMonth) {
        if (i.grade > 4.2) {
          this.nice++
        } else if (i.grade > 3) {
          this.general++
        } else {
          this.bad++
        }
      }

      this.pie = {
        color: [
          '#91c7ae',
          '#749f83',
          '#ca8622',
          '#bda29a',
          '#6e7074',
          '#546570',
          '#c4ccd3'
        ],
        title: {
          text: '历史评分',
          left: 'left',
          textStyle: {
            color: '#ccc'
          }
        },
        legend: {
          left: '0',
          bottom: 0,
          data: ['失望', '一般', '满意']
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '评分',
            type: 'pie',
            radius: ['20%', '70%'],
            avoidLabelOverlap: false,
            label: {
              position: 'inner'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '10',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: this.bad, name: '失望' },
              { value: this.general, name: '一般' },
              { value: this.nice, name: '满意' }
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang='less' scoped>
/deep/ .el-card__body {
  padding: 10px;
  width: 100%;
  background-color: #f2f2f2;
}
.back {
  position: fixed;
  bottom: 10%;
  left: 80%;
  z-index: 10;
}

.orderItem {
  span {
    text-align: center;
  }
  span:first-child {
    color: rgb(129, 129, 129);
    font-size: 10px;
    margin-top: 10px;
  }

  span:last-child {
    font-weight: bold;
    font-size: 10px;
  }
}

.orderItem2 {
  width: 100%;
  background-color: #f2f2f2;
  padding: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  span {
    text-align: center;
  }
  span:first-child {
    color: rgb(129, 129, 129);
    margin-top: 10px;
  }
}

// 平均分的星星比较大
.avgGrade .el-rate /deep/ .el-rate__icon {
  font-size: 35px;
}

.avgGrade {
  margin-bottom: 50px;
  .el-rate {
    position: relative;
    padding-top: 20px;
    text-align: center;
  }
}

.details {
  .showregion {
    margin-top: 10px;
    margin-bottom: 5px;
    color: rgb(129, 129, 129);
    font-size: 10px;
  }
  .detailsText {
    background-color: #f2f2f2;
    padding: 10px;
    margin-bottom: 10px;
  }
}
</style>
